<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no">
    <link rel="stylesheet" href="./css/y1.css">
    <link rel="stylesheet" href="https://3.swiper.com.cn/dist/css/swiper.min.css">
    <link rel="icon" type="image/png" sizes="16x16" href="./img/logo.png">
    <title>Document</title>
</head>
<body>
    <div class="header-y">
        <img class="picture-y" src="./img/img1-y1.png" alt="">
        <div class="top-y">
            <a href="Lindex.html">
                <img class="picture1-y" src="./img/img2-y1.png" alt="">
            </a>
            <p class="font1-y">户外游-游侠风</p>
            <img class="picture2-y" src="./img/img3-y1.png" alt="">
        </div>
        <a href="search.html">
            <div class="search-y">
                <img class="picture3-y" src="./img/img4-y1.png" alt="">
                <p class="input-y"><span>搜索目的地/关键词</span></p>
            </div> 
        </a>
    </div>
    <div class="box-y">
        <div class="banner-y">
            <div class="swiper-container">
                <div class="swiper-wrapper">
                </div>
                <div class="swiper-pagination"></div>
            </div>
        </div>
        <div class="title-y">热门主题</div>
        <ul class="lists1-y">
        </ul>
        <div class="title-y">徒步星级</div>
        <ul class="lists2-y">
            <li>
                <div class="list3-y">
                    <p class="font4-y">1星难度</p>
                    <p class="font5-y">新手休闲</p>
                </div>
                <p class="font6-y"></p>
            </li>
            <li>
                <div class="list23-y">
                    <p class="font4-y">2星难度</p>
                    <p class="font5-y">基础入门</p>
                </div>
                <p class="font6-y"></p>
            </li>
            <li>
                <div class="list33-y">
                    <p class="font4-y">3星难度</p>
                    <p class="font5-y">中级成就</p>
                </div>
                <p class="font6-y"></p>
            </li>
            <li>
                <div class="list43-y">
                    <p class="font4-y">4星难度</p>
                    <p class="font5-y">进阶之路</p>
                </div>
                <p class="font6-y"></p>
            </li>
            <li>
                <div class="list53-y">
                    <p class="font4-y">5星难度</p>
                    <p class="font5-y">挑战之旅</p>
                </div>
                <p class="font6-y"></p>
            </li>
            <li>
                <div class="list63-y">
                    <p class="font4-y">6星难度</p>
                    <p class="font5-y">征途探险</p>
                </div>
                <p class="font6-y"></p>
            </li>
            <li>
                <div class="list73-y">
                    <p class="font4-y">7星难度</p>
                    <p class="font5-y">极限巅峰</p>
                </div>
                <p class="font6-y"></p>
            </li>
        </ul>
        <div class="img-y"></div>
        <div class="title1-y">当季目的地
            <div class="right-y">
                <span>查看更多</span>
                <span class="font7-y"></span>
            </div>
        </div>
        <ul class="lists3-y">
        </ul>
        <div class="topp-y">
            <div class="topp1-y">
                <ul class="lists4-y">
                </ul>
            </div>
            <div class="option-y">
                <div class="select-y" id="destinationBtn">
                    <span class="name-y">目的地</span>
                    <span class="arrowDown-y"></span>
                </div>
                <div class="select-y" id="levelBtn">
                    <span class="name-y">徒步星级</span>
                    <span class="arrowDown-y"></span>
                </div>
                <div class="select-y" id="filterBtn">
                    <span class="name-y">筛选</span>
                    <span class="arrowDown-y"></span>
                </div>
            </div>
            <div class="more1-y" id="more1">
                <div class="mdd-y">
                    <p class="item-y active1-y">国内</p>
                    <p class="item-y">出境</p>
                </div>
                <div class="contain-y">
                </div>
            </div>
            <div class="more2-y" id="more2">
                <div class="specify-y">
                </div>
                <div class="submit-y">完成</div>
            </div>
            <div class="more3-y" id="more3">
                <div class="data-y">
                    <div class="data1-y">出发日期</div>
                    <div class="data2-y">
                        <div class="data3-y">9月</div>
                        <div class="data3-y">10月</div>
                        <div class="data3-y">11月</div>
                        <div class="data3-y">12月</div>
                        <div class="data3-y">26年1月</div>
                        <div class="data3-y" style="margin-right: 0rem;">26年2月</div>
                    </div>
                </div>
                <div class="data-y">
                    <div class="data1-y">自定义出发日期</div>
                    <div class="data2-y">
                        <button>出发时间</button>
                        <div class="cut-y"></div>
                        <button>回程时间</button>
                    </div>
                </div>
                <div class="data-y">
                    <div class="data1-y">天数</div>
                    <div class="data2-y">
                        <div class="data3-y">1天</div>
                        <div class="data3-y">2天</div>
                        <div class="data3-y">3天</div>
                        <div class="data3-y">4-7天</div>
                        <div class="data3-y">8-9天</div>
                        <div class="data3-y" style="margin-right: 0rem;">9天以上</div>
                    </div>
                </div>
            </div>
        </div>
        <div class="scroll-y">
            <ul class="lists5-y">
            </ul>
        </div>
    </div>
</body>
<script src="./js/reset.js"></script>
<script src="https://3.swiper.com.cn/dist/js/swiper.min.js"></script>
<script>
    var swiper = new Swiper('.swiper-container', {
        pagination: '.swiper-pagination',
        nextButton: '.swiper-button-next',
        prevButton: '.swiper-button-prev',
        paginationClickable: true,
        spaceBetween: 30,
        centeredSlides: true,
        autoplay: 2500,
        autoplayDisableOnInteraction: false
    });
</script>
<script>
    const banners = document.querySelector('.swiper-wrapper');
    const contents1 = document.querySelector('.lists1-y');
    const contents3 = document.querySelector('.lists3-y');
    const contents4 = document.querySelector('.lists4-y');
    const contents5 = document.querySelector('.lists5-y');
    const contents6 = document.querySelector('.contain-y');
    const contents7 = document.querySelector('.specify-y');
    const themeIds = Array.from({ length: 10 }, (_, index) => 677 + index);
    let currentThemeId = '';

    const destinationBtn = document.getElementById('destinationBtn');
        const levelBtn = document.getElementById('levelBtn');
        const filterBtn = document.getElementById('filterBtn');
        const more1 = document.getElementById('more1');
        const more2 = document.getElementById('more2');
        const more3 = document.getElementById('more3');
        
        destinationBtn.addEventListener('click', function(e) {
            e.stopPropagation();
            more1.style.display = 'flex';
            more2.style.display = 'none';
            more3.style.display = 'none';
        });
        
        levelBtn.addEventListener('click', function(e) {
            e.stopPropagation();
            more1.style.display = 'none';
            more2.style.display = 'block';
            more3.style.display = 'none';
        });
        
        filterBtn.addEventListener('click', function(e) {
            e.stopPropagation();
            more1.style.display = 'none';
            more2.style.display = 'none';
            more3.style.display = 'block';
        });
        
        document.addEventListener('click', function(e) {
            if (!more1.contains(e.target) && !destinationBtn.contains(e.target)) {
                more1.style.display = 'none';
            }
            if (!more2.contains(e.target) && !levelBtn.contains(e.target)) {
                more2.style.display = 'none';
            }
            if (!more3.contains(e.target) && !filterBtn.contains(e.target)) {
                more3.style.display = 'none';
            }
        });
        
         function initSingleSelect(containerSelector, itemSelector) {
        const container = document.querySelector(containerSelector);
        const observer = new MutationObserver((mutations) => {
            mutations.forEach((mutation) => {
                if (mutation.addedNodes.length) {
                    const items = container.querySelectorAll(itemSelector);
                    items.forEach(item => {
                
                        if (!item.hasAttribute('data-event-bound')) {
                            item.setAttribute('data-event-bound', 'true');
                            item.addEventListener('click', function() {
                                items.forEach(i => i.classList.remove('selected'));
                        
                                this.classList.add('selected');
                            });
                        }
                    });
                }
            });
        });

        observer.observe(container, {
            childList: true,
            subtree: true 
        });
    }
        
    initSingleSelect('.contain-y', '.contain__item'); 
    initSingleSelect('.specify-y', '.specify__boxLevel');
    initSingleSelect('.more3-y', '.data3-y');

    const submitBtn = more2.querySelector('.submit-y');
    submitBtn.addEventListener('click', function() {
        more2.style.display = 'none';
    });

    const domesticItem = document.querySelector('.mdd-y .item-y:nth-child(1)');
    const abroadItem = document.querySelector('.mdd-y .item-y:nth-child(2)');
    
    domesticItem.addEventListener('click', function() {
        domesticItem.classList.add('active1-y');
        abroadItem.classList.remove('active1-y');
    });
    
    abroadItem.addEventListener('click', function() {
        abroadItem.classList.add('active1-y');
        domesticItem.classList.remove('active1-y');
    });

    fetch(`https://m.youxiake.com/api/m/channel/outdoor?sitecode=39&city_id=39`).then(res => res.json()).then(res1 => {
        console.log(res1.data);
        res1.data.banner.forEach(item => {
            banners.innerHTML += `
              <div class="swiper-slide">
                <img class="picture4-y" src="${item.image}" alt="">
              </div>
            `;
        });
        swiper.update();

        if (res1.data.hotTheme && res1.data.hotTheme.length > 0) {
            contents1.innerHTML = '';
            let themeHtml = '';
            res1.data.hotTheme.forEach((list, index) => {
                let specialClass = '';
                if (index === 0 || index === 3 || index === 4) {
                    specialClass = ' special-height';
                }
                themeHtml += `
                    <li class="list1-y">
                        <div class="list2-y${' ' + specialClass}"> 
                            <img class="picture5-y" src="${list.image}" alt="${list.title}">
                            <p class="font2-y">${list.title}</p>
                            <p class="font3-y">${list.subTitle}</p>
                        </div>
                    </li>
                `;
            });
            contents1.innerHTML = themeHtml;
        } else {
            console.warn('hotTheme 数据为空或格式错误');
        }

        res1.data.mdd.forEach(item3 => {
            contents3.innerHTML += `
                <li>
                    <div class="cover-y">
                        <img class="img1-y" src="${item3.image}" alt="">
                        <div class="p-y">
                            <p class="font8-y">${item3.title}</p>
                            <p class="font9-y">${item3.subTitle}</p>
                        </div>
                    </div>
                    <div class="cover1-y"></div>
                    <div class="cover2-y"></div>
                </li>
            `;
        });

        contents4.innerHTML = '';
        let globalHikingLi = null;
        res1.data.outdoorFlowTagVO.themeTags.forEach((item4, index) => {
            const li = document.createElement('li');
            li.textContent = item4.title;
          
            if (item4.title.trim() === '全球徒步') {
                li.classList.add('active-y');
                li.dataset.themeId = '';
                globalHikingLi = li;
                currentThemeId = '';
            } else {
                li.dataset.themeId = themeIds[index - 1];
            }
            contents4.appendChild(li);
        });

        if (globalHikingLi) {
            loadDataByThemeId(currentThemeId);
        }

        const lists4Items = contents4.querySelectorAll('li');
        lists4Items.forEach(item => {
            item.addEventListener('click', function () {
                lists4Items.forEach(li => li.classList.remove('active-y'));
                this.classList.add('active-y');
                scrollToElement(this);
                currentThemeId = this.dataset.themeId;
                loadDataByThemeId(currentThemeId);
            });
        });

    res1.data.outdoorFlowTagVO.mddTags[0].child.forEach(item6 => {
        contents6.innerHTML += `
            <div class="contain__item">
                <span>${item6.title}</span>
            </div>
        `;
    });

    res1.data.outdoorFlowTagVO.levels.forEach(item7 => {
        contents7.innerHTML += `
            <div class="specify__boxLevel">${item7.title}</div>
        `;
    });
    }).catch(err => {
        console.log(err);
    });

    function scrollToElement(element) {
        const listContainer = contents4;
        const containerRect = listContainer.getBoundingClientRect();
        const elementRect = element.getBoundingClientRect();
        const scrollPosition = element.offsetLeft - (containerRect.width / 2) + (elementRect.width / 2);
        listContainer.scrollTo({
            left: scrollPosition,
            behavior: 'smooth'
        });
    }

    function loadDataByThemeId(themeId) {
        contents5.innerHTML = '<li class="loading-y">加载中...</li>';
        const pages = [1, 2, 3];
        pages.forEach(page => {
            let url = `https://m.youxiake.com/api/m/channel/outdoor/flow?daysId=&end=&mddFir=&mddSec=&page=${page}&start=&startDate=&outdoorLevel=&sitecode=39`;
            if (themeId) {
                url += `&themeId=${themeId}`;
            }
            fetch(url)
                .then(res => res.json())
                .then(res1 => {
                    if (page === 1) contents5.innerHTML = '';
                    res1.data.data.list.forEach(item5 => {
                        const { dataDetail } = item5;
                        if (!dataDetail) return;
                        const liHtml = dataDetail && dataDetail.id ? `
                          <li>
                            <img class="picture6-y" src="${item5.dataDetail.image}" alt="">
                            <div class="bottomm1-y">
                              <p class="font10-y">${item5.dataDetail.title}</p>
                              <p class="font11-y">${item5.dataDetail.subTitle}</p>
                            </div>
                          </li>
                        ` : `
                          <li>
                            <img class="picture7-y" src="${item5.dataDetail.image}" alt="">
                            <span class="city1-y">${item5.dataDetail.placeLabel}</span>
                            ${item5.dataDetail.tagList && item5.dataDetail.tagList.length > 0 
                            ? (item5.dataDetail.tagList.includes('爆品') ? '<span class="city2-y">爆品</span>' 
                            : item5.dataDetail.tagList.includes('新品') ? '<span class="city2-y">新品</span>' : '') 
                            : ''}
                            <div class="bottomm2-y">
                              <p class="font12-y">${item5.dataDetail.title}</p>
                              <p class="font13-y">
                                <span class="d-y">${item5.dataDetail.productType}</span>
                                <span class="d-y">${item5.dataDetail.outDoorLabel}</span>
                                <span>${item5.dataDetail.days}</span>
                              </p>
                              <p class="tag-y">
                                <span class="font24-y">${item5.dataDetail.liangdian[0]}</span>
                                <span class="font14-y">${item5.dataDetail.liangdian[1]}</span>
                              </p>
                              <div class="bottomm3-y">
                                <p class="font15-y">￥<span  class="font16-y">${item5.dataDetail.priceLabel}</span>起 </p>
                                <p class="font17-y">${item5.dataDetail.numLabel}</p>
                              </div>
                            </div>
                          </li>
                        `;
                        contents5.innerHTML += liHtml;
                    });
                })
                .catch(err => {
                    console.log(err);
                });
        });
    }
</script>
</html>